<style scoped>
.showImg {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.myFileUpload {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  opacity: 0;
}

</style>
<template>
  <div>
    <div>
      <img :src="storeImage" onerror='this.src="../../static/img/defaultImg.png"' class="showImg">
      <input @change='add_img' type="file" class="myFileUpload">
    </div>
  </div>
</template>
<script>
module.exports = {
  data: function() {
    return {
      storeImage: ''
    }
  },
  methods: {
    add_img(event) {
      var reader = new FileReader();
      var img1 = event.target.files[0];

      reader.readAsDataURL(img1);
      var that = this;
      reader.onloadend = function() {
        that.storeImage = reader.result
      }
    }
  }
}

</script>
